<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>我们学习一个在 vuejs 里面进行数据处理相关的操作。有的时候我们的数据并不是完全的满足显示的需求，我们需要将其处理为复合显示要求的格式。一般我们也叫做数据的格式化操作。</p>
<p>需求：有一个输入框，期待用户输入的字母信息，全部为小写</p>
<p>
    方案1：我们可以把用户输入的内容直接转换。'字符串'.toLowerCase() 这样是不好的，不太建议
</p>
<p>
    方案2：可以将处理数据的操作封装为一个函数，然后在函数里面进行实现。可以使用的
</p>
<p>
    方案3： 可以使用 vuejs 提供的一个叫做 过滤器 的方案对数据进行处理。

    什么是过滤器？过滤是一种处理方案。

    写法1:

    写法2：

</p>
<div id="app">
    用户名：<input type="text" v-model="username">
    <hr>

    <div>
        用户输入的信息为：{{ username.toLowerCase() }}
        <hr>
        用户输入的信息为：{{ formatAphla(username) }}
        <hr>
        <!--2. 使用过滤器 待处理的数据 | 定义的过滤器 -->
        <!-- 过滤器还可以连用-->
        <!--底层 可以厉害为类似函数的调用 formatValToUpper(formatVal(username))-->
        用户输入的信息为（多个过滤器一起使用）：{{ username | formatVal | formatValToUpper }}
        <hr>
        用户输入的信息为：{{ username | formatVal1 }}
        <hr>
        用户输入的信息为：{{ username | formatValToUpper }}
        <hr>
        用户输入的信息为：{{ username | formatValToUpper1 }}
        <hr>
        <hr>
        <h2>{{ timstamp | formatTimeStamp}}</h2>
        <hr>
        <h2>{{ viewCount  }} | 1,231,231,231 </h2>
    </div>

</div>

</body>
<script src="./lib/vue.js"></script>
<script type="text/javascript">
    /*
    1. 定义过滤器
    过滤器写法1：必须在 实例化Vue之前*/
    /**
     * filter方法
     * 参数1：是过滤的名称，用户自定义
     * 参数2：是一个函数，该函数的返回值就是过滤调用时候的显示的内容。并且该函数的参数就是过滤器调用时候处理的数据信息。
     */
    Vue.filter('formatVal', function (val) {
        return val.toLowerCase();
    });

    /*可以把输入转为大写*/
    Vue.filter('formatValToUpper', function (val) {
        return val.toUpperCase();
    });

    Vue.filter('formatTimeStamp', function (val) {
        console.log(val);
        // javascript里面存在一个对时间进行处理的 系统构造函数式
        var date = new Date(val * 1000);

        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();

        var hour = date.getHours();
        var mintus = date.getMinutes();
        var second = date.getSeconds();

        return year + '-' + month + '-' + day + ' ' + hour + ':' + mintus + ':' + second;

    });

    Vue.filter('formatViewCount', function (val) {
        // 实现千分符的逻辑
    })

    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            // 2022-03-22 08:43:22
            /* 需求：可以把时间戳转为 2022-03-22 08:43:22 在页面显示*/
            // 使用 过滤器方案实现 formatTimeStamp
            timstamp: 1647909802,
            /* 需求：实现一个过滤器，可以把整数转换为 千分符方式显示 */
            // 千分符：指的是 数字从右往左数，每三位加一个逗号进行显示，主要是为了便于阅读
            viewCount: 1231231231, // 转换后===> 1,231,231,231
        },
        methods: {
            /**
             * 可以将用户传递的数据转换为小写
             * @param val
             * @returns {string}
             */
            formatAphla(val) {
                return val.toLowerCase();
            }
        },
        /*复数形式*/
        filters: {
            'formatVal1': function (val) {
                return val.toLowerCase();
            },
            'formatValToUpper1': function (val) {
                return val.toUpperCase();
            }
        }
    })
</script>

</html>
